import { useEffect, useState } from 'react'
import './index.scss'
import axios from '../../api/index'
import Navbar from '../../extract/index'
import { Tabs } from 'antd-mobile'
import { SideBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

// 定义类型接口
interface Department {
  id: number
  departmentName: string
}

interface Symptom {
  id: number
  name: string
}

interface DrugCategory {
  id: number
  name: string
}

interface Drug {
  id: number
  name: string
  picture: string
}

function Zsk() {
    const navigate = useNavigate()
    const [departmentId, setDepartmentId] = useState(1)  // 科室id
    const [department, setDepartment] = useState<Department[]>([])  // 科室列表
    const [symptom, setSymptom] = useState<Symptom[]>([])  // 症状列表
    // 获取科室列表
    useEffect(() => {
        axios.get('/share/knowledgeBase/v1/findDepartment').then(res => {
            // console.log(res);
            setDepartment(res.data.result)
            
            // 查找内科的ID并设置为默认值
            const internalMedicine = res.data.result.find((item: Department) => 
                item.departmentName === '内科' || 
                item.departmentName.includes('内科')
            )
            if (internalMedicine) {
                setDepartmentId(internalMedicine.id)
            }
        })
    }, [])
    // 获取症状列表
    useEffect(() => {
        axios.get('/share/knowledgeBase/v1/findDiseaseCategory', {
            params: {
                departmentId: departmentId
            }
        }).then(res => {
            // console.log(res);
            setSymptom(res.data.result)
        })
    }, [departmentId])

    // 获取药品侧边栏列表
    const [drugs, setDrugs] = useState<DrugCategory[]>([]) // 药品列表
    // 获取药品列表
    const [drugsCategoryId, setDrugsCategoryId] = useState(1) // 药品分类id
    useEffect(() => {
        axios.get('/share/knowledgeBase/v1/findDrugsCategoryList').then(res => {
            // console.log(res);
            setDrugs(res.data.result)
            
            // 查找感冒用药的ID并设置为默认值
            const coldMedicine = res.data.result.find((item: DrugCategory) => 
                item.name === '感冒用药' || 
                item.name.includes('感冒') ||
                item.name.includes('感冒用药')
            )
            if (coldMedicine) {
                setDrugsCategoryId(coldMedicine.id)
            }
        })
    })
    const [page] = useState(1) // 页码
    const [count] = useState(10) // 每页数量
    const [drugsList, setDrugsList] = useState<Drug[]>([]) // 药品列表
   
    useEffect(() => {
        axios.get('/share/knowledgeBase/v1/findDrugsKnowledgeList', {
            params: {
                drugsCategoryId: drugsCategoryId,
                page: page,
                count: count,
                
            }
        }).then(res => {
            // console.log(res);
            setDrugsList(res.data.result)
        })
    }, [drugsCategoryId, page, count])
    return (
        <div className='zsk'>
            <div>
                <Navbar />
            </div>
            {/* 常见病症和常见药品的tabbar切换 */}
            <div className='zz-yp'>
                <Tabs>
                    <Tabs.Tab title='常见病症' key='1'>
                        {/* 侧边栏科室列表 */}
                        <div className='department-list'>
                            <SideBar activeKey={departmentId.toString()} onChange={(key) => setDepartmentId(Number(key))}>
                                {
                                    department.map((item) => {
                                        return (
                                            <SideBar.Item key={item.id} title={item.departmentName}>

                                            </SideBar.Item>
                                        )
                                    })
                                }
                            </SideBar>
                        </div>
                        {/* 症状列表 */}
                        <div className='symptom-list'>
                            <div className='symptom-content' >
                                {
                                    symptom.map((item, index) => {
                                        return (
                                            <div key={index} onClick={()=>navigate(`/bzxq/${item.id}?title=${item.name}`)}>{item.name}</div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    </Tabs.Tab>
                    <Tabs.Tab title='常见药品' key='2'>
                        {/* 侧边栏药品列表 */}
                        <div className='department-list'>
                            <SideBar activeKey={drugsCategoryId.toString()} onChange={(key) => setDrugsCategoryId(Number(key))}>
                                {
                                    drugs.map((item) => {
                                        return (
                                            <SideBar.Item key={item.id} title={item.name}>

                                            </SideBar.Item>
                                        )
                                    })
                                }
                            </SideBar>
                        </div>
                        <div className='symptom-list'>
                            {/* 药品列表 */}
                            <div className='symptom-content'>
                                {
                                    drugsList.map((item, index) => {
                                        return (
                                            <div key={index} onClick={()=>navigate(`/ypxq/${item.id}?title=${item.name}`)}>
                                                <p><img src={item.picture} alt="" width={'80px'} height={'80px'}/></p>
                                                <p style={{
                                                    wordWrap: 'break-word',
                                                    wordBreak: 'break-all',
                                                    whiteSpace: 'normal',
                                                    textAlign: 'center',
                                                    padding: '5px',
                                                    fontSize: '14px',
                                                    lineHeight: '1.4'
                                                }}>{item.name}</p>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    </Tabs.Tab>
                </Tabs>
            </div>

        </div>
    )
}

export default Zsk